<template>
  <div class="rank-card">
    <div class="rank-card-title">{{ title }}</div>
    <div class="rank-card-main">
      <template v-for="(item, index) in datas" :key="item">
        <rank-card-item
          :src="item.src"
          :title="item.title"
          :status="item.status"
          :class="{ active: current === index }"
          @click="handleClick(index)"
        />
      </template>
    </div>
    <div class="rank-card-title">全球媒体榜</div>
    <div class="rank-card-main">
      <template v-for="(item, index) in datas" :key="item">
        <rank-card-item
          :src="item.src"
          :title="item.title"
          :status="item.status"
          :class="{ active: current === index + 3 }"
          @click="handleClick(index+3)"
        />
      </template>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed, ref } from 'vue'

import RankCardItem from './rank-card-item.vue'

import { rankCardProps } from './props'

export default defineComponent({
  props: rankCardProps,
  components: {
    RankCardItem
  },
  setup(props) {
    const current = ref(0)
    const title = computed(() => props.title)
    const datas = computed(() => props.datas)

    const handleClick = (index: number) => {
      current.value = index
    }

    return {
      datas,
      title,
      current,
      handleClick
    }
  }
})
</script>

<style scoped lang="less">
.rank-card {
  width: 100%;
  .rank-card-title {
    width: 100%;
    font-size: 12px;
    font-weight: bold;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 5px 15px;
    letter-spacing: 1px;
  }
  .rank-card-main {
    width: 100%;
  }
}
.active {
  background: #e6e6e6;
}
</style>
